<template>
  <div class="bigbox">
    <div class="topbox" style="height:82px;margin-bottom:10px;">
        <el-form :model="form" ref="form"  label-position="left" label-width="80px">
           <el-row :gutter="20">
            <el-col :span="5">
                <el-form-item label="用电企业">
                  <!-- <el-select v-model="form.orgNo" style="width: 100%;" size="small"  ref="qiye" @change="changeqi">
                    <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
                  </el-select> -->
                  <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqi"
                    :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="配电室">
                  <!-- <el-select v-model="form.switchroomId" style="width: 100%;" size="small" >
                    <el-option v-for="(item,index) in peilist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                  </el-select> -->
                  <FilterSelect2
                    v-model="form.switchroomId"
                    :optionlist="peilist"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="日期">
                  <el-date-picker
                  v-model="form.year"
                  style="width: 100%;"
                    type="year"
                    size="small"
                    ref="year"
                    @change="changeyear"
                    placeholder="选择年">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="9" style="text-align: right !important;">
                <el-form-item>
                    <el-button  @click="chongzhi"  size="small">重 置</el-button>
                    <el-button type="primary" @click="submit" size="small" >查 询</el-button>
                </el-form-item>
              </el-col>
           </el-row>
        </el-form>
     </div>
      <div class="bodybox">
        <div style="text-align: right;margin-bottom: 10px;">
            <div class="title" style="display: inline-block;">{{ bizOrgName }}{{ switchroomIds }}年度用电量报表(kWh)</div>
            <div style="display: inline-block;width:40%;" class="tabbar">
              <el-button type="primary" size="small"   @click="daochu"><i class="el-icon-upload2" >导出</i></el-button>
              <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                <span @click="shuaxin" style=" cursor: pointer;margin: 0 10px;"><i class="el-icon-refresh-right"></i></span>
              </el-tooltip>
              <el-dropdown trigger="click" @command="command">
              <span class="el-dropdown-link">
                <el-tooltip class="item" effect="dark" content="密度" placement="top">
                <span style=" cursor: pointer;"><i class="el-icon-d-caret"></i></span>
              </el-tooltip>
              </span>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item command="默认">默认</el-dropdown-item>
                <el-dropdown-item command="中等">中等</el-dropdown-item>
                <el-dropdown-item command="紧凑">紧凑</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            </div>
          </div>
          <div style="height: 90%;">
            <template>
              <el-table
              v-loading="loading"
              :data="tableData"
              style="width: 100%"
              border
              id="exportTabnian"
              height="calc(100% - 1px)"
              ref="table"
              :size="iissize"
              :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
                >
                <el-table-column
                type="index"
                  label="序号"
                  align="center"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="devName"
                  label="设备名称"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="epowerJan"
                  align="right"
                  label="1月">
                </el-table-column>
                <el-table-column
                  prop="epowerFeb"
                  align="right"
                  label="2月">
                </el-table-column>
                <el-table-column
                  prop="epowerMar"
                  align="right"
                  label="3月">
                </el-table-column>
                <el-table-column
                  prop="epowerApr"
                  align="right"
                  label="4月">
                </el-table-column>
                <el-table-column
                  prop="epowerMay"
                  align="right"
                  label="5月">
                </el-table-column>
                <el-table-column
                  prop="epowerJun"
                  align="right"
                  label="6月">
                </el-table-column>
                <el-table-column
                  prop="epowerJul"
                  align="right"
                  label="7月">
                </el-table-column>
                <el-table-column
                  prop="epowerAug"
                  align="right"
                  label="8月">
                </el-table-column>
                <el-table-column
                  prop="epowerSep"
                  align="right"
                  label="9月">
                </el-table-column>
                <el-table-column
                  prop="epowerOct"
                  align="right"
                  label="10月">
                </el-table-column>
                <el-table-column
                  prop="epowerNov"
                  align="right"
                  label="11月">
                </el-table-column>
                <el-table-column
                  prop="epowerDec"
                  align="right"
                  label="12月">
                </el-table-column>
                <el-table-column
                  prop="ydl"
                  align="right"
                  label="合计">
                </el-table-column>
              </el-table>
            </template>
            <div class="fenye" style="text-align: right;margin-top: 10px;">
                  <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page.sync="page._pageNo"
                  :page-size="20"
                  @current-change="getlist"
                  :total="+totalCount">
                </el-pagination>
               </div>
          </div>
      </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getceshijiekou, getpdaxialaapi } from '@/api/ElectricalDistribution/dayreport'
import {getyearlistapi,exportyearlist} from '@/api/ElectricalDistribution/yearreport'
export default {
  name: 'ReportFormsIndex',

  data () {
    return {
      form: {year:'',switchroomId:''},
      qiyelist: [],
      peilist: [],
      tableData: [],
      iissize: 'medium',
      loading: false,
      bizOrgName: '',
      switchroomIds: '',
      val: '',
      page: {
        _pageNo: 0,
        _pageSize:20
      },
      totalCount:''
    }
  },
  async mounted() {
    const dates = new Date()
    const year = dates.getFullYear() // 年
    this.form.year = year.toString()
    const res = await getceshijiekou()
    this.qiyelist = res.data.list
    this.form.orgNo =this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : res.data.list[0].bizOrgNo
    this.bizOrgName=this.qiyelist.filter(ele=>ele.bizOrgNo === this.form.orgNo)[0]?.bizOrgName
    const ress = await getpdaxialaapi({ orgNo:this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : this.qiyelist[0].bizOrgNo })
    this.peilist = ress.data.list
    this.form.switchroomId = ress.data.list[0].id
    this.switchroomIds=ress.data.list[0].name
this.getlist()
  },
  methods: {
    command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    async getlist() {
      this.loading=true
      const resss = await getyearlistapi({ ...this.form, _pageNo: this.page._pageNo - 1, _pageSize: this.page._pageSize })
    this.totalCount=resss.data.totalCount
    this.tableData = resss.data.list
    this.loading=false
    },
    async changeqi(val) {
      this.$store.commit('setuserobject', val)
      this.val=val
      const ress = await getpdaxialaapi({ orgNo: val })
      this.peilist = ress.data.list
      console.log(this.peilist);
      this.form.switchroomId = ress.data.list[0]?.id?ress.data.list[0].id:''
    },
    changeyear(val) {
      this.form.year=this.$refs.year.displayValue
    },
    async submit() {
      this.loading = true
      // console.log(this.qiyelist.filter(ele => ele.bizOrgNo == this.val));
      this.bizOrgName = this.qiyelist.filter(ele => ele.bizOrgNo == this.form.orgNo)[0].bizOrgName
      this.switchroomIds=this.peilist.filter(ele=>ele.id===this.form.switchroomId)[0].name
      const resss= await getyearlistapi({...this.form,_pageNo:this.page._pageNo-1,_pageSize:this.page._pageSize})
      this.tableData = resss.data.list
      this.loading=false
    },
    async chongzhi() {
      const dates = new Date()
    const year = dates.getFullYear() // 年
    this.form.year = year
    const res = await getceshijiekou()
    this.qiyelist = res.data.list
      this.form.orgNo = res.data.list[0].bizOrgNo
      this.bizOrgName=res.data.list[0].bizOrgName
    const ress = await getpdaxialaapi({ orgNo: this.qiyelist[0].bizOrgNo })
    this.peilist = ress.data.list
      this.form.switchroomId = ress.data.list[0].id
      this.switchroomIds=ress.data.list[0].name
    this.loading=true
    const resss= await getyearlistapi({...this.form,_pageNo:this.page._pageNo-1,_pageSize:this.page._pageSize})
    this.tableData = resss.data.list
    this.loading=false
    },
    shuaxin() {
      this.submit()
      this.$message.success('数据更新成功')
    },
    async daochu() {
      const res= await exportyearlist({ ...this.form,switchroomName:this.switchroomIds,orgName:this.bizOrgName, isParams: true })
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '年用电量清单.xls')
    }
  }
}
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
.bewdao{
  width: 63px;
  height: 32px;
}
.tabbar{
  text-align: right;
}
.bigbox{
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
}
.topbox{
  background-color: #fff;
  padding: 20px;
}
.bodybox{
  height: calc(100% - 90px);
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
  .title{
    font-size: 20px;
  }
}
</style>
